<template>
	<view :data-theme="theme">
		<view class="print_header">
			<view v-if="isShowAlert" class="u-demo-block__content">
				<view class="u-alert-item">
					<view>
						{{description}}
					</view>
					<view @click="closeShowAlert">
						<uni-icons type="closeempty" size="18" :color="bgColor"></uni-icons>
					</view>
				</view>
			</view>
			<view
				style="display: flex; flex-flow: row;justify-content: space-around;height: 40px;line-height: 40px;position: relative;color: #b6b3b6;">
				<uni-datetime-picker type="date" :clear-icon="false" :end="endTime" v-model="deliveryTime"
					@change="dataClick" @maskClick="maskClick">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:calendarShow?bgColor:null}" @click="calendarShow = true">
						<view style="font-size: 24rpx;margin-right: 6rpx;">{{formattedDate?formattedDate:tomorrowTime}}
						</view>
						<u-icon :name="calendarShow?'arrow-up':'arrow-down'" size="11"
							:color="calendarShow?bgColor:''"></u-icon>
					</view>
				</uni-datetime-picker>
				<picker model="selector" @change="operatyConfirm" range-key="name" :value="invoiceClassIndex"
					:range="operatyDataList" @cancel="cancelPicker"
					style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:invoiceClassShow?bgColor:null}" @click="invoiceClassShow = true">
						<view style="font-size: 24rpx;margin-right: 6rpx;">{{operatyCity?operatyCity:'全部管理城市'}}</view>
						<u-icon :name="invoiceClassShow?'arrow-up':'arrow-down'" size="11"
							:color="invoiceClassShow?bgColor:''"></u-icon>
					</view>
				</picker>
				<picker @change="warehouseChange" @cancel="cancelPicker" :value="warehouseIndex" :range="warehouseList"
					range-key="depotName" style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:warehouseShow?bgColor:null}" @click="warehouseShow = true">
						<view style="font-size: 24rpx;margin-right: 6rpx;">{{depotNameValue?depotNameValue:'全部仓库'}}
						</view>
						<u-icon :name="warehouseShow?'arrow-up':'arrow-down'" size="11"
							:color="warehouseShow?bgColor:''"></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="header-content">
			<text style="font-size: 30rpx;font-weight: bold;">配送日期</text>
			<text style="margin: 0 10rpx;color: #bebbbe;"> | </text>
			<text style="font-size: 32rpx;font-weight: 500;">{{searchDeliveryData?searchDeliveryData:endTime}}</text>
		</view>
		<!-- 交货进度信息 -->
		<scroll-view scroll-y="true" class="print_center" @scrolltolower="scrolltolowerFn">
			<view class="card" v-if="deliverData.length>0" v-for="(item,index) in deliverData">
				<view class="card-tag">
					<view class="city_name">
						{{item.cityName}}
					</view>
					<view class="sale_number">
						销量: <span style="margin-left: 20rpx;">{{item.totalDelivery}}</span>
					</view>
				</view>
				<view class="operaty-list" v-for="(ele,indexn) in item.children">
					<view class="operaty_name"
						style="background-color: #f5f5f5;padding:20rpx 10rpx;display: flex;justify-content: space-between;">
						<view style="font-weight: 500;">
							{{ele.depotName}}
						</view>
						<view style="color: #9d9a9d;display: flex;margin-left: 20rpx;position: relative;">
							<text style="margin: 0 4rpx;">送货信息</text>
							<u-icon name="question-circle" size="14" color="#bababa" @click="showNav(ele)"></u-icon>
						</view>
						<!-- <uni-tooltip class="item" content="示例文字" placement="left">
							<view class="item">左</view>
						</uni-tooltip> -->
						<view style="font-weight: 500;">
							{{ele.planExecuteTime}} <span
								style="margin-left: 10rpx;">{{ele.startDeliveryTime}}-{{ele.endDeliveryTime}}</span>
						</view>
					</view>

					<view class="operaty_content" style="margin: 20rpx 0;">
						<view
							style="font-size: 30rpx;color: #999;display: flex;text-align: center;align-items: center;">
							<view style="flex: 1;">
								<view class="demo-uni-col dark">应送货</view>
							</view>
							<view style="flex: 1;">
								<view class="demo-uni-col dark">已收货</view>
							</view>
							<view style="flex: 1;">
								<view class="demo-uni-col dark">待交货</view>
							</view>
						</view>
						<view
							style="font-size: 32rpx;color: #000;padding: 10rpx 0;font-weight: bold;display: flex;text-align: center;align-items: center;">
							<view style="flex: 1;">
								<view class="demo-uni-col dark" style="color: #1b6ae6;" @click="goDetailDelivery(ele)">
									{{ele.totalDeliveryNumber}}
								</view>
							</view>
							<view style="flex: 1;">
								<view class="demo-uni-col dark">{{ele.totalReceivingNumber}}
								</view>
							</view>
							<view style="flex: 1;">
								<view class="demo-uni-col dark" style="color: #1b6ae6;" @click="goDetailDelivery(ele)">
									{{ele.totalDeliveryNumber - ele.totalReceivingNumber}}
								</view>
								<view style="font-weight: normal;font-size: 28rpx;margin-top: 10rpx;"
									@click="goDetailDelivery(ele)">
									未送货{{ele.totalDeliveryNumber - ele.totalReceivingNumber}}件
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class='noCommodity' v-if="deliverData.length == 0 ">
			<view class='pictrue'>
				<image src='../static/noSearch.png'></image>
			</view>
			<text class="text-ccc" style="font-size: 30rpx;color: #999;">暂无信息</text>
		</view>
		<tui-drawer mode="bottom" :visible="showInfoValue" @close="showInfoValue = false">
			<view class="driver_nsure" style="height: 400rpx;">
				<view @click="showInfoValue = false" class="title">送货信息<text
						class="iconfont icon-guanbi5"></text></view>
				<view style="height: auto;padding-top: 20rpx; margin: 0 40rpx;">
					<view>
						<!-- <radio-group v-model="deliverValue" @change="radioChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(item, index) in addressList" :key="index">
								<view>
									<radio :value="item.driverId" :checked="index == deliverIndex"/>
								</view>
								<view style="line-height: 19px;">{{item.driverName}}</view>
							</label>
						</radio-group> -->
						<view style="margin: 10rpx 0;font-size: 30rpx;"><span style="font-weight: bolder;margin-right: 10rpx;">司机名称:</span>{{topShowInfo.driverName?topShowInfo.driverName:'暂无'}}</view>
						<view style="margin: 10rpx 0;font-size: 30rpx;"><span style="font-weight: bolder;margin-right: 10rpx;">仓库名称:</span>{{topShowInfo.depotName?topShowInfo.depotName:'暂无'}}</view>
						<view style="margin: 10rpx 0;font-size: 30rpx;"><span style="font-weight: bolder;margin-right: 10rpx;">送货地址:</span>{{topShowInfo.depotAddress?topShowInfo.depotAddress:'暂无'}}</view>
						
					</view>
					<view style="width: 100%;margin-top: 80rpx;">
						<button @click="showInfoValue = false" class="bg_color"
							style="border-radius: 10px;padding: 20rpx;color: #fff;">好的</button>
					</view>
				</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		getProgressListApi
	} from '@/api/delivery.js';
	import tuiDrawer from '../detailOfDelivery/common/tui-drawer/index.vue';
	import {
		queryBusinessOperateCityApi,
	} from '@/api/operateCity.js';
	import {
		queryDepotInformationApi
	} from "@/api/qualityTest.js"
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				isShowAlert: true,
				description: '由于订单延迟支付或取消，请以23:10以后的应送货数量为准。',
				// --------------- 管理城市 --------------
				dataForm: {
					queryType: 0,
					current: 1,
					size: 10,
				},
				tableData: [], //经营城市
				operatyDataList: [],
				operatyCity: '',
				invoiceClassIndex: 0,
				invoiceClassShow: false,
				// ---------------------------------------
				deliverForm: {
					deliveryDate: '',
				},
				deliverData: [], //交货进度列表
				keyword: '',
				range: [],
				calendarShow: false,

				// ----------------时间选则-----------------
				dataClassIndex: 1,
				dataUpList: [], // 备货日期
				tomorrowTime: '',
				todayTime: '',
				deliveryTime: '', //配送时间
				endTime: '',
				formattedDate: '',
				searchDeliveryData: '', //配送日期
				// -----------------------------------------
				// ---------------------仓库搜索----------------------------
				warehouseIndex: 0, // 验收索引值
				warehouseList: [], // 仓库信息
				warehouseShow: false, // 验收列表显示
				depotNameValue: '',
				// -------------气泡窗-------------
				showInfoValue: false,
				topShowInfo:{},

			}
		},
		async onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.dateHandle();
			this.getOperatyList();
			this.getQueryDepotInformation();
			setTimeout(() => {
				this.getDataList();
			}, 300);
		},
		mounted() {
			// 获取明天的日期
			let tomorrow = new Date();
			tomorrow.setDate(tomorrow.getDate() + 1); // 设置日期为明天

			// 格式化明天的日期为符合 UniDateTimePicker 要求的格式，例如 'YYYY-MM-DD'
			let year = tomorrow.getFullYear();
			let month = String(tomorrow.getMonth() + 1).padStart(2, '0');
			let day = String(tomorrow.getDate()).padStart(2, '0');
			let formattedTomorrow = `${year}-${month}-${day}`;

			// 将明天的日期作为 end 截止时间
			this.endTime = formattedTomorrow;

			setTimeout(() => {
				this.deliveryTime = formattedTomorrow;
			}, 200)
		},
		methods: {
			showNav(ele) {
				let that = this;
				that.showInfoValue = true;
				that.topShowInfo = ele;
				console.log('12321',ele)
			},

			// -------------------查询交货进度列表--------------------
			getDataList() {
				this.deliverForm.deliveryDate = this.deliveryTime;
				getProgressListApi(this.deliverForm).then((res) => {
					for (let i = 0; i < res.data.length; i++) {
						for (let j = 0; j < this.operatyDataList.length; j++) {
							if (res.data[i].cityId == this.operatyDataList[j].useId) {
								res.data[i].cityName = this.operatyDataList[j].name;
							}
						};
						for (let e = 0; e < this.warehouseList.length; e++) {
							if (res.data[i].depotId == this.warehouseList[e].depotId) {
								res.data[i].depotName = this.warehouseList[e].depotName;
								res.data[i].startDeliveryTime = this.warehouseList[e].startDeliveryTime;
								res.data[i].endDeliveryTime = this.warehouseList[e].endDeliveryTime;
								res.data[i].depotAddress = this.warehouseList[e].depotAddress
							}
						};
					};
					const newDataValue = res.data.reduce((acc, obj) => {
						const isInreduce = acc.find(item => item.cityId === obj.cityId);
						if (isInreduce) {
							isInreduce.children.push({
								depotId: obj.depotId,
								totalDeliveryNumber: obj.totalDeliveryNumber,
								totalReceivingNumber: obj.totalReceivingNumber,
								depotName: obj.depotName,
								startDeliveryTime: obj.startDeliveryTime,
								endDeliveryTime: obj.endDeliveryTime,
								deliveryTaskNumber: obj.deliveryTaskNumber,
								planExecuteTime: obj.planExecuteTime.split(" ")[0].slice(-5),
								driverId: obj.driverId,
								driverName: obj.driverName,
								driverPhone: obj.driverPhone,
								vehicleNo: obj.vehicleNo,
								depotAddress:obj.depotAddress
							});
							isInreduce.totalDelivery += obj.totalDeliveryNumber;
							isInreduce.totalReceiving += obj.totalReceivingNumber;
						} else {
							acc.push({
								cityId: obj.cityId,
								id: obj.id,
								cityName: obj.cityName,
								totalDelivery: obj.totalDeliveryNumber,
								totalReceiving: obj.totalReceivingNumber,
								children: [{
									depotId: obj.depotId,
									totalDeliveryNumber: obj.totalDeliveryNumber,
									totalReceivingNumber: obj.totalReceivingNumber,
									startDeliveryTime: obj.startDeliveryTime,
									endDeliveryTime: obj.endDeliveryTime,
									depotName: obj.depotName,
									deliveryTaskNumber: obj.deliveryTaskNumber,
									planExecuteTime: obj.planExecuteTime.split(" ")[0]
										.slice(-5),
									driverId: obj.driverId,
									driverName: obj.driverName,
									driverPhone: obj.driverPhone,
									vehicleNo: obj.vehicleNo,
									depotAddress:obj.depotAddress
								}]
							});
						}
						return acc;
					}, [])

					this.deliverData = newDataValue;
				})
			},
			// -------------------关于搜索仓库事件------------------------------


			goStockPage(item) {
				this.goPage(`/pages/stockingReference/stockingList/stockingList?operatyName=${item.operatyName}`);
			},
			goDetailDelivery(ele) {
				this.goPage('/pages/deliverySchedule/detailOfDelivery/detailOfDelivery?data=' + JSON.stringify(ele) +
					'&deliveryTime=' + this.deliveryTime);
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},

			// 关闭提示
			closeShowAlert() {
				this.isShowAlert = false;
			},


			/** 
			 获取经营城市
			 */
			async getOperatyList() {
				const res = await queryBusinessOperateCityApi(this.dataForm);
				if (res.code == 200) {
					this.tableData = res.data;
					let operatyDataList = [{
						name: '全部管理城市',
						id: -1,
						useId: -1
					}];
					for (let item of this.tableData) {
						operatyDataList.push({
							name: item.name,
							id: item.id,
							useId: item.useId,
						})
					};
					this.operatyDataList = operatyDataList;
				}
			},
			operatyConfirm(ele) {
				let index = ele.detail.value;
				let operatyCity = this.operatyDataList[index].name;
				this.operatyCity = operatyCity;

				this.deliverForm.cityId = this.operatyDataList[index].useId;
				if (index == 0) {
					delete this.deliverForm.cityId
				}
				this.getDataList();
				this.invoiceClassShow = false;
			},
			// 获取仓库列表
			async getQueryDepotInformation() {
				try {
					let result = await queryDepotInformationApi()

					this.warehouseList = result.data.list
					this.warehouseList.unshift({
						depotId: -1,
						depotName: '全部仓库'
					})
				} catch (e) {
					//TODO handle the exception
					this.$util.Tips({
						title: e
					})
					console.log('error:', e)
				}
			},
			// 仓库选择确认事件
			warehouseChange(e) {
				this.warehouseIndex = e.detail.value;
				let index = e.detail.value;
				let depotNameValue = this.warehouseList[index].depotName;
				this.depotNameValue = depotNameValue;

				this.deliverForm.depotId = this.warehouseList[index].depotId;
				if (index == 0) {
					delete this.deliverForm.depotId
				};
				this.getDataList();
				this.warehouseShow = false;
			},
			// 日期选择器
			openDataPicker() {
				this.calendarShow = true;
				this.dateHandle(); //更新日期
			},
			dataClick(value) {
				this.searchDeliveryData = value;
				// 将日期字符串转换为 "MM月DD日" 的形式
				let date = new Date(value);
				let month = String(date.getMonth() + 1).padStart(2, '0');
				let day = String(date.getDate()).padStart(2, '0');
				let formattedDate = `${month}月${day}日`;

				// 输出格式化后的日期
				this.formattedDate = formattedDate;
				this.getDataList();
				this.calendarShow = false;
			},
			maskClick() {
				this.calendarShow = false;
			},
			cancelPicker() {
				this.invoiceClassShow = false;
				this.warehouseShow = false; // 仓库取消
			},
			// 获取日期
			dateHandle() {
				let that = this;
				// 获取当前时间
				const now = new Date();

				// 获取今天日期，格式为：月-日
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const today = `${month < 10 ? '0' + month : month}月${day < 10 ? '0' + day : day}日`;
				that.todayTime = today;
				// 获取明天日期，使用 setDate() 函数
				const tomorrow = new Date(now);
				tomorrow.setDate(now.getDate() + 1);
				const month1 = tomorrow.getMonth() + 1;
				const day1 = tomorrow.getDate();
				const tomorrow1 = `${month1 < 10 ? '0' + month1 : month1}月${day1 < 10 ? '0' + day1 : day1}日`;
				that.tomorrowTime = tomorrow1;

				let dataUpList = [];
				dataUpList.push({
					name: `${today}` + ' ' + '配送',
					index: 1,
				}, {
					name: `${tomorrow1}` + ' ' + '配送',
					index: 2,
				});
				this.dataUpList = dataUpList;
			},
		}
	}
</script>

<style lang="scss">
	.bg_color{
		@include main_bg_color(theme);
	}
	page {
		display: flex;
		height: 100%;
		flex-direction: column;
		overflow: hidden;

		.container {
			display: flex;
			height: 100%;
			flex-direction: column;
			overflow: hidden;
		}

		// 头部内容
		.print_header {
			background-color: white;
			// padding: 0px 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			// height: 110px;

			.header_card {
				margin: 20rpx;
				background-color: #faf7fa;
				border-radius: 10rpx;
				padding: 30rpx;
			}

		}

		// 内容为空
		.empty {
			flex: 1;
			height: 100%;
		}

		.header-content {
			margin: 30rpx;
			text-align: center;
			display: flex;
		}

		.card {
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.card-tag {
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				padding: 20rpx 0 40rpx 0;
				font-size: 30rpx;
			}
		}

		// 交货进度列表
		.print_center {
			// margin-top: 10px;
			// background-color: white;
			flex: 1;
			overflow: scroll;
		}

		.operaty-list {
			margin-bottom: 30rpx;
		}

		.demo-uni-row {
			font-size: 26rpx;
			color: #999;
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			text-align: center;
			align-items: center;
		}

		.demo-wight {
			font-size: 32rpx;
			font-weight: bold;
			color: #999;
			display: flex;
			justify-content: space-between;
			text-align: center;
		}

		.undelivered-goods {
			font-size: 20rpx;
			font-weight: 600;
			color: #e22e38;
			display: flex;
			justify-content: space-between;
			text-align: center;
		}

		// 弹窗
		.popup-content {
			text-align: center;
			background-color: #fff;
		}

		.popup-content>text {
			font-size: 30rpx;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.popup-height {
			width: 200px;
		}

		.round-checkbox {
			border-radius: 50%;
		}

		// 底部内容
		.print_footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			height: 60px;
			padding: 0 30rpx;

			view {
				margin-right: 20px;
			}

			.button_footer {
				border-radius: 10rpx;
				padding: 20rpx 40rpx;
				color: #fff;
				@include main_bg_color(theme);
			}
		}

		.dialog_nav {
			position: absolute;
			/* #ifdef MP */
			left: 14rpx;
			/* #endif */
			/* #ifdef H5 || APP-PLUS*/
			right: 14rpx;
			/* #endif */
			width: 240rpx;
			background: #212121;
			color: #f1f1f1;
			box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
			z-index: 999;
			border-radius: 10rpx;

			&::before {
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				/* #ifdef MP */
				left: 0;
				right: 0;
				margin: auto;
				/* #endif */
				/* #ifdef H5 || APP-PLUS */
				right: 8px;
				/* #endif */
				top: -9px;
				border-bottom: 10px solid #fff;
				border-left: 10px solid transparent;
				/*transparent 表示透明*/
				border-right: 10px solid transparent;
			}
		}

		.u-alert-item {
			// flex: 1;
			display: flex;
			justify-content: space-between;
			// text-align: center;
			color: #e86953;
			font-size: 24rpx;
			padding: 16rpx 20rpx;
		}

		.u-demo-block__content {
			flex-direction: column !important;
			// align-items: stretch;
			background-color: #fff4f3;
		}
	}

	.noCommodity {
		margin-top: 30%;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
	
	
	.driver_nsure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;
	
			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 28rpx;
			}
		}
	}
	
	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>